<template>
  <gg-form-item :label="label" :labelWidth="localLabelWidth" :layout="localLayout" :rtip="rtip">
    <view class="gg-info-area" ref="onEmpty" v-bind:style="ggInfoArea">
      <view class="gg-info-item">
        <text>{{info}}</text>
      </view>
    </view>
  </gg-form-item>
</template>

<script>
import MixinsCommon from '../mixins/mixins-common'
export default {
  mixins: [MixinsCommon],
  name: "GgInfo",
  inject: {
    ggFormGroup: {
      default() {
        return null
      }
    }
  },
  props: {
    info: {
      type: [Number, String],
      default: ""
    },
    rtip: {
      type: String,
      default: ""
    },
    infoAlign: {
      type: String,
      default: "right"
    }
  },
  data() {
    return {
      ggInfoArea: {}
    };
  },
  watch: {
    value(newVal) {
    }
  },
  created: function () {
    this._dealStyle();
  },
  methods: {

    _dealStyle() {
      this.ggInfoArea = {
        textAlign: this.infoAlign
      }
    }
  }
};
</script>

<style>
.gg-info-area {
  margin-top: 8px;
  line-height: 1.5em;
  text-align: right;
}
.gg-info-item {
  line-height: 1.5em;
  font-size: 14px;
  display: inline-block;
  text-align: left;
}
</style>
